<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <style>
        .zg_shipin_cont {
            width: 860px;
            height: 485px;
            margin: 50px auto;
            background-color: #ccc;
            position: relative;
        }
        
        .zg_shipin_cont:hover .offcn_shaolr {
            opacity: 1;
        }
        /* 播放控件 */
        
        .offcn_shaolr {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 74px;
            background-color: rgba(0, 0, 0, 0.3);
            /* opacity: 0;
            transition: all 0.5s; */
        }
        
        .zg19_lbjdl {
            position: absolute;
            width: 143px;
            height: 74px;
            left: 0;
            top: 0;
        }
        
        .zg19_lbjdl a {
            position: absolute;
            left: 30px;
            top: 27px;
            width: 21px;
            height: 26px;
            background: url('img/offcn_icnolh04.png') no-repeat;
        }
        
        .zg19_lbjdl a.playlh {
            background: url('img/offcn_icnolh03.png') no-repeat;
        }
        
        .zg19_lbjdl p {
            font: 16px/18px 'microsoft yahei';
            color: #fff;
            width: 70px;
            height: 18px;
            position: absolute;
            left: 64px;
            top: 31px;
        }
        
        .zg19_lbjdc {
            position: absolute;
            width: 550px;
            height: 74px;
            left: 143px;
            top: 0;
        }
        
        .zg19_lbjdc .offcn_pross {
            width: 100%;
            height: 4px;
            background: #be998f;
            position: absolute;
            left: 0;
            top: 41px;
            cursor: pointer;
        }
        
        .zg19_lbjdc .offcn_prossOn {
            height: 4px;
            background: #2096ff;
            left: 0;
            top: 41px;
            z-index: 3;
            position: absolute;
            cursor: pointer;
        }
        
        .zg19_lbjdc .offcn_cursolh {
            width: 22px;
            height: 22px;
            position: absolute;
            left: 0px;
            top: 31px;
            background: url(img/offcn_icnolh05.png) no-repeat;
            z-index: 3;
        }
        
        .zg19_lbjdr {
            width: 160px;
            height: 74px;
            position: absolute;
            right: -15px;
            top: 0;
        }
        
        .offcn_timestop {
            font: 16px/18px 'microsoft yahei';
            color: #fff;
            width: 70px;
            position: absolute;
            top: 31px;
            z-index: 2;
            right: 82px;
        }
        
        .offcn_afullscr {
            width: 39px;
            height: 39px;
            position: absolute;
            right: 31px;
            top: 20px;
            z-index: 2;
            background: url(img/offcn_icnolh02.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="zg_shipin_cont">
        <video src="./video/mov_bbb.mp4" width="100%" height="100%" id="video"></video>

        <div class="offcn_shaolr">
            <div class="zg19_lbjdl">
                <!-- 播放按钮 -->
                <a href="javascript:void(0);" id="offcn_playlh"></a>
                <!-- 当前时长 -->
                <p class="offcn_timestar" id="offcn_timestar">00:00:00</p>
            </div>

            <div class="zg19_lbjdc">
                <!-- 总长 -->
                <p class="offcn_pross" id="offcn_pross"></p>
                <!-- 当前的进度 -->
                <p class="offcn_prossOn" id="offcn_prossOn"></p>
                <!-- 小圆点 -->
                <a href="javascript:void(0);" class="offcn_cursolh" id="offcn_cursolh"></a>
            </div>

            <div class="zg19_lbjdr">
                <!-- 总时长 -->
                <p class="offcn_timestop" id="offcn_timestop">00:00:00</p>
                <!-- 全屏按钮 -->
                <a href="javascript:void(0);" class="offcn_afullscr" id="offcn_afullscr"></a>
            </div>
        </div>
    </div>

    <script src="./javascript/U.js"></script>
    <script>
        var zg_shipin_cont = document.querySelector('.zg_shipin_cont');
        var video = U.getId('video'); // 视频

        var offcn_playlh = U.getId('offcn_playlh'); // 播放按钮
        var offcn_timestar = U.getId('offcn_timestar'); // 当前时长

        var offcn_pross = U.getId('offcn_pross'); // 总长度盒子
        var offcn_prossOn = U.getId('offcn_prossOn'); // 当前的进度 
        var offcn_cursolh = U.getId('offcn_cursolh'); // 小圆点 

        var offcn_timestop = U.getId('offcn_timestop'); // 总时长盒子
        var offcn_afullscr = U.getId('offcn_afullscr'); // 全屏按钮

        var num = 0; // 总长度s
        var tag = true; // 开关
        var offcn_prossLeng = offcn_pross.clientWidth; // 总长度 px


        // 一打开取得总时长
        video.onloadedmetadata = fn;
        var timer = setInterval(function() {
            fn()
        }, 100);

        function fn() {
            num = video.duration;
            offcn_timestop.innerText = U.time(num);
            if (num) {
                clearInterval(timer);
            }
        }

        // 点击播放
        offcn_playlh.onclick = function() {
            if (tag) {
                // 播放
                video.play();
                U.addClass(this, 'playlh');
            } else {
                // 暂停
                video.pause();
                U.removeClass(this, 'playlh');
            }
            tag = !tag;
        }

        // 播放的过程中，不断的触发
        video.ontimeupdate = function() {
            cur = video.currentTime; // 当前播到哪里 s
            offcn_timestar.innerText = U.time(cur);
            var curPx = cur * offcn_prossLeng / num;
            offcn_prossOn.style.width = curPx + 'px';
            offcn_cursolh.style.left = curPx + 'px';

            // 播放结束
            if (video.ended) {
                offcn_timestar.innerText = '00:00:00';
                offcn_prossOn.style.width = '0px';
                offcn_cursolh.style.left = '0px';
                U.removeClass(offcn_playlh, 'playlh');
                video.currentTime = 0; // 视频回到最开始
                tag = true;
            }
        }

        // 按下
        offcn_cursolh.onmousedown = function(ev) {
            var left = U.getPos(this.parentNode).left; // 父级到左边的距离
            var disX = ev.pageX - left - this.offsetLeft; // 鼠标到小圆点左边的距离

            // 拖动
            document.onmousemove = function(ev) {
                var l = ev.pageX - disX - left;
                // 控制范围 
                if (l < 0) {
                    l = 0;
                } else if (l > offcn_prossLeng) {
                    l = offcn_prossLeng;
                }

                offcn_prossOn.style.width = l + 'px';
                offcn_cursolh.style.left = l + 'px';

                // 设置视频位置
                video.currentTime = l * num / offcn_prossLeng;

            }

            // 抬起
            document.onmouseup = function(ev) {
                document.onmousemove = document.onmouseup = null;
            }
            return false;
        }

        // 全屏
        offcn_afullscr.onclick = function() {
            zg_shipin_cont.requestFullscreen();
        }
    </script>
</body>

</html>